import React, {useEffect, useState} from 'react';
import {Button, Card, Space, Table,Modal, message} from "antd";
import {PlusOutlined} from "@ant-design/icons";
import {Panel} from "../../../components/Index";
import {connect} from "react-redux";
import ModalForm from "./ModalForm";
import axios from "axios";
import {get, post} from "../../../service";

function Setting(props) {
    const [dataSource, setDataSource] = useState([]);
    const getTableProps = () => {
        return {
            columns: [
                {
                    title: '菜单',
                    dataIndex: 'name'
                },
                {
                    title: '访问地址 ',
                    dataIndex: 'linkUrl'
                },
                {
                    title: '操作',
                    render: (text, record) => (
                        <Space>
                            <a key="view" onClick={onView(record)}>查看</a>
                            <a key="edit" onClick={onEdit(record)}>编辑</a>
                            <a key="delete" onClick={onRemove(record)}>删除</a>
                            <a key="add" onClick={onAdd(record)}>新增</a>
                        </Space>
                    )
                }
            ],
            dataSource: dataSource || [],
            rowKey: 'id',
            pagination: false,
        }
    }
    //请求列表数据
    const onGetList = () => {
        get('/api/menu/list').then(res => {
            setDataSource(res.records)
        })
    }
    useEffect(() => {
        onGetList()
    }, [])
    const onAdd = (record) => {
        return ()=> {
            // 打开窗口
            props.dispatch({
                type: 'showModalForm',
                data: {
                    title: "新增",
                    data:record?{pid:record.id}:{},// 表单数据
                    refreshList: onGetList
                }
            });
        }
    }
    const  onView = (record) => {
        return ()=> {
            // 打开窗口
            props.dispatch({
                type: 'showModalForm',
                data: {
                    title: "详请",
                    data:record// 表单数据
                }
            });
        }
    }
    const onEdit = (record) => {
        return ()=> {
            // 打开窗口
            props.dispatch({
                type: 'showModalForm',
                data: {
                    title: "编辑",
                    data:record,// 表单数据
                    refreshList: onGetList
                }
            });
        }
    }
    const onRemove=(record)=>{
        return ()=>{
            Modal.confirm({
                title:'删除',
                content:'确认删除该菜单？',
                onOk:()=>{
                    post('/api/menu/delete',{id:record.id}).then(res=>{
                        message.success('删除成功');
                        onGetList();
                        window.dispatchEvent(new Event('refreshMenus'));
                    })
                }
            })
        }
    }
    const {modalForm} = props.menuState;
    return (
        <Panel title="菜单管理">
            <div className="m-operate">
                <Button type="primary" icon={<PlusOutlined/>} onClick={onAdd()}>新增</Button>
            </div>
            <Card>
                <Table {...getTableProps()} />
            </Card>
            {modalForm && <ModalForm {...modalForm} {...props}/>}
        </Panel>
    );
}

const mapStateToProps = (store) => ({menuState: store.menu});
const mapDispatchToProps = (dispatch) => ({dispatch});

export default connect(mapStateToProps, mapDispatchToProps)(Setting);
